<template>
  <div class="warehouse-management">
    <!-- 顶部操作按钮 -->
    <el-row :gutter="10" class="header-buttons">
      <el-button type="primary" @click="handleAdd">新增</el-button>
      <el-button @click="handleImport">导入</el-button>
      <el-button @click="handleExport">导出</el-button>
      <el-button @click="handleRefresh">刷新</el-button>
    </el-row>

    <!-- 仓库表格 -->
    <el-table
      :data="tableData"
      border
      style="width: 100%; margin-top: 20px"
    >
      <el-table-column label="操作" width="80">
        <template #default="scope">
          <el-button
            type="text"
            icon="el-icon-edit"
            size="small"
            @click="handleEdit(scope.row)"
          />
          <el-button
            type="text"
            icon="el-icon-delete"
            size="small"
            @click="handleDelete(scope.row)"
          />
        </template>
      </el-table-column>
      <el-table-column
        prop="warehouseCode"
        label="仓库编号"
        width="120"
      />
      <el-table-column
        prop="warehouseName"
        label="仓库名称"
      />
      <el-table-column
        prop="warehouseKeeper"
        label="仓管"
        width="120"
      />
      <el-table-column label="状态" width="100">
        <template #default="scope">
          <el-switch
            v-model="scope.row.status"
            active-color="#13ce66"
            inactive-color="#ff4949"
            @change="handleStatusChange(scope.row)"
          />
        </template>
      </el-table-column>
    </el-table>

    <!-- 新增仓库弹窗 -->
    <el-dialog title="新增仓库" v-model="addWarehouseDialogVisible" width="400px">
      <el-form :model="newWarehouseForm" label-width="100px" :rules="formRules">
        <el-form-item label="仓库编号" prop="warehouseCode">
          <el-input v-model="newWarehouseForm.warehouseCode" placeholder="请输入仓库编号" />
        </el-form-item>
        <el-form-item label="仓库名称" prop="warehouseName">
          <el-input v-model="newWarehouseForm.warehouseName" placeholder="请输入仓库名称" />
        </el-form-item>
        <el-form-item label="仓管" prop="warehouseKeeper">
          <el-input v-model="newWarehouseForm.warehouseKeeper" placeholder="请输入仓管姓名" />
        </el-form-item>
      </el-form>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="addWarehouseDialogVisible = false">取消</el-button>
          <el-button type="primary" @click="saveNewWarehouse">保存</el-button>
        </span>
      </template>
    </el-dialog>

    <!-- 编辑仓库弹窗（可复用新增弹窗逻辑，也可单独写，这里简单示例复用思路） -->
    <el-dialog title="编辑仓库" v-model="editWarehouseDialogVisible" width="400px">
      <el-form :model="editWarehouseForm" label-width="100px" :rules="formRules">
        <el-form-item label="仓库编号" prop="warehouseCode">
          <el-input v-model="editWarehouseForm.warehouseCode" placeholder="请输入仓库编号" />
        </el-form-item>
        <el-form-item label="仓库名称" prop="warehouseName">
          <el-input v-model="editWarehouseForm.warehouseName" placeholder="请输入仓库名称" />
        </el-form-item>
        <el-form-item label="仓管" prop="warehouseKeeper">
          <el-input v-model="editWarehouseForm.warehouseKeeper" placeholder="请输入仓管姓名" />
        </el-form-item>
      </el-form>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="editWarehouseDialogVisible = false">取消</el-button>
          <el-button type="primary" @click="saveEditWarehouse">保存</el-button>
        </span>
      </template>
    </el-dialog>
  </div>
</template>

<script setup>
import { ref, reactive } from 'vue';
import { ElMessage, ElMessageBox } from 'element-plus';

// 模拟表格数据
const tableData = ref([
  {
    warehouseCode: 'CK001',
    warehouseName: '默认仓库',
    warehouseKeeper: '1号仓库管员',
    status: true
  },
  {
    warehouseCode: 'CK002',
    warehouseName: '冷藏库',
    warehouseKeeper: '',
    status: true
  },
  {
    warehouseCode: 'CK003',
    warehouseName: '食品库',
    warehouseKeeper: '',
    status: true
  }
]);

// 新增仓库弹窗显隐标识
const addWarehouseDialogVisible = ref(false);
// 编辑仓库弹窗显隐标识
const editWarehouseDialogVisible = ref(false);
// 新增仓库表单数据
const newWarehouseForm = reactive({
  warehouseCode: '',
  warehouseName: '',
  warehouseKeeper: ''
});
// 编辑仓库表单数据
const editWarehouseForm = reactive({
  warehouseCode: '',
  warehouseName: '',
  warehouseKeeper: ''
});
// 表单验证规则
const formRules = {
  warehouseCode: [
    { required: true, message: '请输入仓库编号', trigger: 'blur' }
  ],
  warehouseName: [
    { required: true, message: '请输入仓库名称', trigger: 'blur' }
  ],
  warehouseKeeper: [
    { required: false, message: '请输入仓管姓名', trigger: 'blur' }
  ]
};

// 新增操作，打开新增弹窗
const handleAdd = () => {
  addWarehouseDialogVisible.value = true;
  // 重置新增表单
  newWarehouseForm.warehouseCode = '';
  newWarehouseForm.warehouseName = '';
  newWarehouseForm.warehouseKeeper = '';
};

// 保存新增仓库
const saveNewWarehouse = () => {
  // 表单验证
  const formRef = document.querySelector('form[aria-label="新增仓库"]').__vueRefs.form;
  formRef.validate((valid) => {
    if (valid) {
      // 模拟新增逻辑，可实际调用接口
      tableData.value.push({
       ...newWarehouseForm,
        status: true // 新增仓库默认启用
      });
      addWarehouseDialogVisible.value = false;
      ElMessage.success('新增仓库成功');
    } else {
      ElMessage.error('请完善表单信息');
    }
  });
};

// 编辑操作，打开编辑弹窗并赋值
const handleEdit = (row) => {
  editWarehouseDialogVisible.value = true;
  editWarehouseForm.warehouseCode = row.warehouseCode;
  editWarehouseForm.warehouseName = row.warehouseName;
  editWarehouseForm.warehouseKeeper = row.warehouseKeeper;
};

// 保存编辑仓库
const saveEditWarehouse = () => {
  // 表单验证
  const formRef = document.querySelector('form[aria-label="编辑仓库"]').__vueRefs.form;
  formRef.validate((valid) => {
    if (valid) {
      // 找到要编辑的行并更新数据，可实际调用接口
      const index = tableData.value.findIndex(item => item.warehouseCode === editWarehouseForm.warehouseCode);
      if (index!== -1) {
        tableData.value[index].warehouseName = editWarehouseForm.warehouseName;
        tableData.value[index].warehouseKeeper = editWarehouseForm.warehouseKeeper;
      }
      editWarehouseDialogVisible.value = false;
      ElMessage.success('编辑仓库成功');
    } else {
      ElMessage.error('请完善表单信息');
    }
  });
};

// 导入操作
const handleImport = () => {
  ElMessage.info('点击了导入，可对接文件上传解析逻辑');
};

// 导出操作
const handleExport = () => {
  ElMessage.info('点击了导出，可实现表格数据导出逻辑');
};

// 刷新操作
const handleRefresh = () => {
  // 可重新请求接口获取最新数据，这里简单示例
  ElMessage.success('页面已刷新');
};

// 删除操作
const handleDelete = (row) => {
  ElMessageBox.confirm(
    '此操作将永久删除该仓库，是否继续？',
    '提示',
    {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'warning'
    }
  ).then(() => {
    const index = tableData.value.findIndex(item => item === row);
    if (index!== -1) {
      tableData.value.splice(index, 1);
      ElMessage.success('删除成功');
    }
  }).catch(() => {
    ElMessage.info('已取消删除');
  });
};

// 状态变更操作
const handleStatusChange = (row) => {
  ElMessage.info(`【${row.warehouseName}】状态变更为：${row.status? '启用' : '禁用'}`);
  // 可对接接口更新状态
};
</script>

<style scoped>
.warehouse-management {
  padding: 20px;
}
.header-buttons {
  text-align: right;
}
.dialog-footer {
  text-align: right;
}
</style>